<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>按钮的状态</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="../../js/lib/bootstrap/dist/css/bootstrap.min.css">
  <style>
    pre {
      /*color: #c7254e;*/
    }  
  </style>
</head>
<body>

	<div class="container">
    <h1>按钮的状态</h1>
    <pre>
      1. 激活状态: .active
      2. 禁用状态: disabled属性
    </pre>
    <p>
      <button class="btn btn-default" type="button">默认按钮</button>
      <button class="btn btn-default active" type="button">激活的默认按钮</button>
    </p>    
    <p>
      <button class="btn btn-primary" type="button">原始按钮</button>
      <button class="btn btn-primary active" type="button">激活的原始按钮</button>
    </p>
    <p>
      <button class="btn btn-default" type="button">默认按钮</button>
      <button class="btn btn-default active" type="button" disabled>禁用的默认按钮</button>
    </p>    
    <p>
      <button class="btn btn-primary" type="button">原始按钮</button>
      <button class="btn btn-primary active" type="button" disabled>禁用的原始按钮</button>
    </p>

    <h1>锚点的状态</h1>
    <pre>
      1. 如果想让锚点元素看起来是按钮,最好给锚点添加 role="button" 属性
      2. 然后 .btn .btn-x
      3. 禁用状态: .disabled
    </pre>
    <p>
      <a class="btn btn-default btn-lg" role="button" href="#">默认链接</a>
      <a class="btn btn-default btn-lg disabled" role="button" href="#">禁用的默认链接</a>
    </p>
    <p>
      <a class="btn btn-primary btn-lg" role="button" href="#">原始链接</a>
      <a class="btn btn-primary btn-lg disabled" role="button" href="#">禁用的原始链接</a>
    </p>                    
  </div>

  <script src="../../js/lib/jquery/dist/jquery.min.js"></script>
  <script src="../../js/lib/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>